﻿<!DOCTYPE html>
<%@include file="../../../common/include/inc.jsp" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Portal管理平台</title>

    <meta name="description" content="User login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/components/font-awesome/css/font-awesome.css"/>

    <!-- text fonts -->
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace-fonts.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace-part2.css"/>
    <![endif]-->
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace-rtl.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace-ie.css"/>
    <![endif]-->

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="${ctx}/resource/plugins/ace/components/html5shiv/dist/html5shiv.min.js"></script>
    <script src="${ctx}/resource/plugins/ace/components/respond/dest/respond.min.js"></script>
    <![endif]-->

</head>

<body class="login-layout">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <%--<i class="ace-icon fa fa-leaf green"></i>--%>
                            <%--<span class="red">Rock</span>--%>
                            <img src="${ctx}/resource/image/stateGrid_white_700.png" style="height: 50px">
                            <span class="white" id="id-text2">Portal管理平台</span>
                        </h1>
                        <%--<h4 class="blue" id="id-company-text">&copy; Company Name</h4>--%>
                    </div>
                    <div class="space-6"></div>
                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <i class="ace-icon fa fa-coffee green"></i>
                                        请输入登录信息
                                    </h4>
                                    <div class="space-6"></div>
                                    <form method="post" action="${ctx}/login/userLogin" id="loginForm" role="form">
                                        <fieldset>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="text" class="form-control" placeholder="用户名/邮箱/手机号"
                                                           name="loginCode" id="loginCode" value="${loginCode}"/>
                                                    <i class="ace-icon fa fa-user"></i>
                                                </span>
                                            </label>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="password" class="form-control" placeholder="密码"
                                                           name="password" id="password" value="${password}"/>
                                                    <i class="ace-icon fa fa-lock"></i>
                                                </span>
                                            </label>
                                            <label class="user_identify clearfix show">
                                                <span class="input-icon input-icon-right login-seccode">
                                                <input type="input" class="form-control" style="width: 150px;"
                                                       placeholder="验证码"
                                                       name="user_identify"
                                                       id="user_identify"/>
                                                <i class="ace-icon fa fa-lock"></i>
                                                </span>
                                                <span class="identify-image-span">
                                                     <span class="identify-refresh form-control pull-right no-border" style="width: 80px;border-width: 0px;background-color: transparent;">
                                                         <a href="#"><i class="fa fa-refresh"></i>换一张</a>
                                                     </span>
                                                    <img class="identify-image form-control pull-right no-padding no-margin" style="width: 60px;" src=""/>
                                                </span>
                                            </label>
                                            <div class="login-info">&nbsp;</div>
                                            <div class="space"></div>
                                            <div class="clearfix">
                                                <label class="inline">
                                                    <input type="checkbox" class="ace" id="remember" name="remember" value="on"/>
                                                    <span class="lbl"> 记住密码</span>
                                                </label>
                                                <button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
                                                    <i class="ace-icon fa fa-key"></i>
                                                    <span class="bigger-110">登录</span>
                                                </button>
                                            </div>
                                            <div class="space-4"></div>
                                        </fieldset>
                                    </form>
                                    <%--
                                    <div class="social-or-login center">
                                        <span class="bigger-110">Or Login Using</span>
                                    </div>
                                    <div class="space-6"></div>
                                    <div class="social-login center">
                                        <a class="btn btn-primary">
                                            <i class="ace-icon fa fa-facebook"></i>
                                        </a>
                                        <a class="btn btn-info">
                                            <i class="ace-icon fa fa-twitter"></i>
                                        </a>
                                        <a class="btn btn-danger">
                                            <i class="ace-icon fa fa-google-plus"></i>
                                        </a>
                                    </div>
                                    --%>
                                </div><!-- /.widget-main -->
                                <%--<div class="toolbar clearfix">--%>
                                    <%--<div>--%>
                                        <%--<a href="#" data-target="#forgot-box" class="forgot-password-link">--%>
                                            <%--<i class="ace-icon fa fa-arrow-left"></i>--%>
                                            <%--I forgot my password--%>
                                        <%--</a>--%>
                                    <%--</div>--%>
                                    <%--<div>--%>
                                        <%--<a href="#" data-target="#signup-box" class="user-signup-link">--%>
                                            <%--I want to register--%>
                                            <%--<i class="ace-icon fa fa-arrow-right"></i>--%>
                                        <%--</a>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            </div><!-- /.widget-body -->
                        </div><!-- /.login-box -->
                        <div id="forgot-box" class="forgot-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header red lighter bigger">
                                        <i class="ace-icon fa fa-key"></i>
                                        Retrieve Password
                                    </h4>
                                    <div class="space-6"></div>
                                    <p>
                                        Enter your email and to receive instructions
                                    </p>
                                    <form>
                                        <fieldset>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="email" class="form-control" placeholder="Email"/>
                                                    <i class="ace-icon fa fa-envelope"></i>
                                                </span>
                                            </label>

                                            <div class="clearfix">
                                                <button type="button" class="width-35 pull-right btn btn-sm btn-danger">
                                                    <i class="ace-icon fa fa-lightbulb-o"></i>
                                                    <span class="bigger-110">Send Me!</span>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div><!-- /.widget-main -->

                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        Back to login
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div><!-- /.widget-body -->
                        </div><!-- /.forgot-box -->
                        <div id="signup-box" class="signup-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header green lighter bigger">
                                        <i class="ace-icon fa fa-users blue"></i>
                                        New User Registration
                                    </h4>
                                    <div class="space-6"></div>
                                    <p> Enter your details to begin: </p>
                                    <form>
                                        <fieldset>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="email" class="form-control" placeholder="Email"/>
                                                    <i class="ace-icon fa fa-envelope"></i>
                                                </span>
                                            </label>

                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="text" class="form-control" placeholder="Username"/>
                                                    <i class="ace-icon fa fa-user"></i>
                                                </span>
                                            </label>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="password" class="form-control" placeholder="Password"/>
                                                    <i class="ace-icon fa fa-lock"></i>
                                                </span>
                                            </label>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="password" class="form-control" placeholder="Repeat password"/>
                                                    <i class="ace-icon fa fa-retweet"></i>
                                                </span>
                                            </label>
                                            <label class="block">
                                                <input type="checkbox" class="ace"/>
                                                    <span class="lbl">
                                                        I accept the
                                                        <a href="#">User Agreement</a>
                                                    </span>
                                            </label>
                                            <div class="space-24"></div>
                                            <div class="clearfix">
                                                <button type="reset" class="width-30 pull-left btn btn-sm">
                                                    <i class="ace-icon fa fa-refresh"></i>
                                                    <span class="bigger-110">Reset</span>
                                                </button>
                                                <button type="button" class="width-65 pull-right btn btn-sm btn-success">
                                                    <span class="bigger-110">Register</span>
                                                    <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        <i class="ace-icon fa fa-arrow-left"></i>
                                        Back to login
                                    </a>
                                </div>
                            </div><!-- /.widget-body -->
                        </div><!-- /.signup-box -->
                    </div><!-- /.position-relative -->
                    <%--<div class="navbar-fixed-top align-right">--%>
                        <%--<br/>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-dark" href="#">Dark</a>--%>
                        <%--&nbsp;--%>
                        <%--<span class="blue">/</span>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-blur" href="#">Blur</a>--%>
                        <%--&nbsp;--%>
                        <%--<span class="blue">/</span>--%>
                        <%--&nbsp;--%>
                        <%--<a id="btn-login-light" href="#">Light</a>--%>
                        <%--&nbsp; &nbsp; &nbsp;--%>
                    <%--</div>--%>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.main-content -->
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="${ctx}/resource/plugins/ace/components/jquery/dist/jquery.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="${ctx}/resource/plugins/ace/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='${ctx}/resource/plugins/ace/components/_mod/jquery.mobile.custom/jquery.mobile.custom.js'>" + "<" + "/script>");
</script>
<script src="${ctx}/resource/plugins/ace/components/jquery.form/jquery.form.js"></script>
<script src="${ctx}/resource/plugins/jquery.cookie.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function ($) {

        $('body').attr('class', 'login-layout');
        $('#id-text2').attr('class', 'white');

        //login window middle
        if ($(document).height() - $('.col-sm-10.col-sm-offset-1').height() > 0) {
            $('.login-container').css('margin-top', ($(document).height() - $('.col-sm-10.col-sm-offset-1').height()) / 2);
        }

        $('.user-signup-link').on('click', function (e) {
            if ($(document).height() > 594) {
                $('.login-container').css('margin-top', ($(document).height() - 594) / 2);
            } else {
                $('.login-container').css('margin-top', 0);
            }
            e.preventDefault();
        });

        $('.back-to-login-link').on('click', function (e) {
            if ($(document).height() > 411) {
                $('.login-container').css('margin-top', ($(document).height() - 411) / 2);
            } else {
                $('.login-container').css('margin-top', 0);
            }
            e.preventDefault();
        });

        $(document).on('click', '.toolbar a[data-target]', function (e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible');//hide others
            $(target).addClass('visible');//show target
        });

        //判断是否已经需要验证码
        <%--showIdentify('${LOGIN_USER_ERROR_NUM}');--%>

        //验证码
        $('.identify-refresh,.identify-image').click(function () {
            $('.identify-image').attr('src', ctx+'/login/generateCaptcha?' + Math.random() * 100 + (new Date()).valueOf());
        }).trigger('click');

        // 记住密码
        if ('on' == '${remember}') {
            $('#remember').attr("checked", true);
        }

        // cookie自动填值
        var loginCode = $.cookie('loginCode');
        if(loginCode != null) {
            $('#loginCode').val(loginCode);
            $('#password').val(window.atob($.cookie('password')));
            $('#remember').attr("checked", true);
        }

    });

    //显示验证码
//    function showIdentify(err_num) {
//        if (err_num > 3 && $('.user_identify').hasClass('hidden')) {
//            $('#user_identify').val('');
//            $('.user_identify').removeClass('hidden').addClass('show');
//        }
//    }

    //you don't need this, just used for changing background
//    jQuery(function ($) {
//        $('#btn-login-dark').on('click', function (e) {
//            $('body').attr('class', 'login-layout');
//            $('#id-text2').attr('class', 'white');
//            $('#id-company-text').attr('class', 'blue');
//
//            e.preventDefault();
//        });
//        $('#btn-login-light').on('click', function (e) {
//            $('body').attr('class', 'login-layout light-login');
//            $('#id-text2').attr('class', 'grey');
//            $('#id-company-text').attr('class', 'blue');
//
//            e.preventDefault();
//        });
//        $('#btn-login-blur').on('click', function (e) {
//            $('body').attr('class', 'login-layout blur-login');
//            $('#id-text2').attr('class', 'white');
//            $('#id-company-text').attr('class', 'light-blue');
//
//            e.preventDefault();
//        }).trigger('click'); //default blur
//    });

    //用户登录
    $('#loginForm').ajaxForm({
        type: 'post',
        dataType: 'json',
        beforeSubmit: function () {
            $('#user_identify').val(getIdentifyCode());
            if ($('#loginCode').val() == '') {
                $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;用户名不能为空</i>');
                return false;
            }
            if ($('#password').val() == '') {
                $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;密码不能为空</i>');
                return false;
            }
            if ($('#user_identify').val() == '') {
                $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;验证码不能为空</i>');
                return false;
            }else if ($('#user_identify').val() != getIdentifyCode()){
                return false;
            }
            return true;
        },
        success: function (res) {
            if (res.success == false) {
                $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;' + res.msg +'</i>');
                if ($('.user_identify').hasClass('show')) {
                    $('.identify-image').attr('src', ctx+'/login/generateCaptcha?' + Math.random() * 100 + (new Date()).valueOf());
                }
            } else {
                $('.login-info').html('&nbsp;');
                 window.location.href = ctx + "/index";
            }
        },
        error: function (xhr) {
            $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;登录失败,请联系管理员进行解决</i>');
        }
    });

    function getIdentifyCode(){
        var code = '';
        $.ajax({
            async: false,
            type: 'get',
            dataType: 'json',
            url: ctx + '/login/getIdentifyCode?'+ Math.random() * 100 + (new Date()).valueOf(),
            success: function (data) {
                if (data.success == true) {
                    code = data.result;
                }
            }
        });
        return code;
    }

    $('#user_identify').focus(function(){
        $('.login-info').html('&nbsp;');
    });

    $('#user_identify').blur(function(){
        if ($('#user_identify').val() == '') {
            $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;验证码不能为空</i>');
        } else if ($('#user_identify').val() != getIdentifyCode()) {
            $('.login-info').html('<i class="fa fa-exclamation-triangle red">&nbsp;验证码输入错误</i>');
        } else {
            $('.login-info').html('&nbsp;');
        }
    });
</script>
</body>
</html>
